<template>
  <div>
    <!--面包屑导航区-->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>生产线列表</el-breadcrumb-item>
      <el-breadcrumb-item>生产线列表1</el-breadcrumb-item>
    </el-breadcrumb>

    <el-header style="height: 40px;padding:0 5px">
        <el-button @click="addlineDialogVisible = true" size="small" style="background-color:#153791;color:#fff">添加生产线</el-button>
    </el-header>


    <!--主区域，展示生产线-->
    <el-main class="maincard">
      <!--生产线展示行-->
      <el-row :gutter="20">
        <!--规定图片的宽度-->
        <el-col>
          <el-row
            v-for="(item, index) in linelist"
            :key="item.name"
            :offset="index > 0 ? 2 : 0"
          >
            <el-card :body-style="{ padding: '5px' }" class="lineclass">
             <img v-if="item.state === 1" :src="processingimg" alt="" />
              <img v-else-if="item.state === 2" :src="breakdownimg" alt="" />
              <img v-else-if="item.state === 3" :src="maintainimg" alt="" />
              <img v-else="item.state === 4" :src="stopimg" alt="" />

              <div class="cardStyle">
                <div id="lineinfo">
                  <span>{{ item.name }}</span>
                  <span>车型号码：{{ item.ctype }}</span>
                  <span>机器人数目：{{ item.rnumber }}</span>
                  <span>气缸数目：{{ item.anumber }}</span>
                </div>
                <div>
                  <span>
                    <el-button type="success" round @click="showRobot(item.id)">查看详情</el-button></span
                  >
                  <span>
                    <el-button type="info" round @click="modifylineDialogVisible = true;">编辑生产线</el-button></span
                  >
                  <span>
                    <el-button type="danger" round @click="deleteProccess(item)">删除生产线</el-button></span>
                </div>
              </div>
            </el-card>
          </el-row>
        </el-col>
      </el-row>
      <!--</el-card>-->
    </el-main>


    <!--各種對話框-->
    <!-- 对话框1：查看生产线 -->
    <el-dialog title="查看生产线" :visible.sync="checklineDialogVisible" width="50%">
      <!-- 内容主题区域 model绑定的表格  rules绑定表格的验证规则  ref绑定表格的别名 -->
        <p>敬请期待</p>
        <span slot="footer" class="dialog-footer">
        <!-- 底部区域 -->
        <el-button @click="checklineDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="checklineDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 对话框2：增加生产线 -->
    <el-dialog title="增加生产线" :visible.sync="addlineDialogVisible" width="50%">
      <!-- 内容主题区域 model绑定的表格  rules绑定表格的验证规则  ref绑定表格的别名 -->
    <el-form :model="addLineForm" :rules="addLineFormRules" ref="addLineFormRef" label-width="100px" >
      <!-- prop 绑定到验证规则 -->
      <el-form-item label="夹具名称" prop="clampname">
        <el-input v-model="addLineForm.clampname"></el-input>
      </el-form-item>
      <el-form-item label="起始位置" prop="startadd">
        <el-input v-model="addLineForm.clampname"></el-input>
      </el-form-item>
      <el-form-item label="长度" prop="length">
        <el-input v-model="addLineForm.clampname"></el-input>
      </el-form-item>
      <el-form-item label="结束位置" prop="endadd">
        <el-input v-model="addLineForm.clampname"></el-input>
      </el-form-item>
      <el-form-item label="设备类型" prop="eid">
        <el-input v-model="addLineForm.clampname"></el-input>
      </el-form-item>

    </el-form>
        <span slot="footer" class="dialog-footer">
        <!-- 底部区域 -->
        <el-button @click="addlineDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addlineDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 对话框3：修改生产线 -->
    <el-dialog title="修改生产线" :visible.sync="modifylineDialogVisible" width="50%">
      <!-- 内容主题区域 model绑定的表格  rules绑定表格的验证规则  ref绑定表格的别名 -->
    <el-form :model="addLineForm" :rules="addLineFormRules" ref="addLineFormRef" label-width="100px" >
      <!-- prop 绑定到验证规则 -->
      <el-form-item label="夹具名称" prop="clampname">
        <el-input v-model="addLineForm.clampname"></el-input>
      </el-form-item>
      <el-form-item label="起始位置" prop="startadd">
        <el-input v-model="addLineForm.clampname"></el-input>
      </el-form-item>
      <el-form-item label="长度" prop="length">
        <el-input v-model="addLineForm.clampname"></el-input>
      </el-form-item>
      <el-form-item label="结束位置" prop="endadd">
        <el-input v-model="addLineForm.clampname"></el-input>
      </el-form-item>
      <el-form-item label="设备类型" prop="eid">
        <el-input v-model="addLineForm.clampname"></el-input>
      </el-form-item>

    </el-form>
        <span slot="footer" class="dialog-footer">
        <!-- 底部区域 -->
        <el-button @click="modifylineDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="modifylineDialogVisible = false">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import imgOne from "../../assets/processing.png";
import imgTwo from "../../assets/breakdown.png";
import imgThree from "../../assets/maintain.png";
import imgFour from "../../assets/stop.png";
import Robotview from "../robot/Robotview";

export default {
  name: "Firstline",
  mounted() {
    this.getLienlist()
  },
  data() {
    return {
        processingimg: imgOne,
        breakdownimg: imgTwo,
        maintainimg:imgThree,
        stopimg:imgFour,

        //控制查看生产线的对话框
      checklineDialogVisible: false,
      //控制修改生产线的对话框
      modifylineDialogVisible: false,
      //控制添加生产线的对话框
      addlineDialogVisible: false,
      // 生产线表单
      addLineForm:{
        clampname:'',
        startadd:'',
        length:'',
        endadd:'',
        eid:'',
      },
      //校验规则
      addLineFormRules:{
        clampname:[
          { required: true, message: '请输入用户名', trigger: 'blur' },

        ],
        startadd:[
          { required: true, message: '起始位置', trigger: 'blur' },

        ],
        length:[
          { required: true, message: '长度', trigger: 'blur' },

        ],
        endadd:[
          { required: true, message: '结束位置', trigger: 'blur' },

        ],
        eid:[
          { required: true, message: '设备类型', trigger: 'blur' },

        ],


      },
      // linenum: [
      //   { imgUrl: imgOne, name: "广汽荻原底盘生产线", number: 12 },
      //   { imgUrl: imgTwo, name: "广汽荻原车头生产线", number: 12 },
      //   { imgUrl: imgThree, name: "广汽荻原尾箱生产线", number: 12 },
      // ],
        linelist:[],
        linenum: [
          { "id": 1,
            "name": "线体1",
            "pid": 0,
            "level": 0,
            "state": 1,
            "ctype": 2,
            "rnumber": 99,
            "anumber": 99,
          },
          { "id": 2,
            "name": "线体2",
            "pid": 0,
            "level": 0,
            "state": 2,
            "ctype": 2,
            "rnumber": 66,
            "anumber": 66,
          },
          { "id": 3,
            "name": "线体3",
            "pid": 0,
            "level": 0,
            "state": 3,
            "ctype": 2,
            "rnumber": 77,
            "anumber": 77,
          },
          { "id": 4,
              "name": "线体4",
              "pid": 0,
              "level": 0,
              "state": 4,
              "ctype": 2,
              "rnumber":44,
              "anumber": 44,
          },
      ],
        count:"aaaa",

    };
  },
  methods: {
      getLienlist() {
        this.linelist = this.linenum;
    },
    edit() {
    },
    deleteProccess(item) {
      // this.$http.delete("/xx/xx").then((data) => {
      //   this.getLienlist();
      // });
      alert("当前要删除产线的id是  "+  item.id);
      alert("当前要删除产线的名字是  "+  item.name);

    },
    addLine() {
      this.linenum++;
    },
    deleteLine() {
      this.linenum--;
    },
    showRobot(id) {
      this.$router.push({
          path: "/Robotview",
          query: {
              id: id,
          }
      });
      //   this.$router.push('/Robotview')
    },

  },
  components: {
        Robotview,
    },
};
</script>

<style lang='less' scoped>
/*.text {*/
/*font-size: 14px;*/
/*}*/

/*.item {*/
/*margin-bottom: 18px;*/
/*}*/

/*.clearfix:before,*/
/*.clearfix:after {*/
/*display: table;*/
/*content: "";*/
/*}*/
/*.clearfix:after {*/
/*clear: both*/
/*}*/

#lineinfo {
  padding-top: 10px;
}


.cardStyle {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  & span {
    margin: 5px 10px;
    // margin-bottom: 100px;
    // margin-top: 10px;
    // margin-right: 10px;
  }
}
.maincard {
  width: auto;
  height: 600px;
  background-color: #fefff9;
  border-radius: 10px;
  border: 1px solid rgba(58, 21, 25, 0.96);
}

.editbutton {
  margin-left: 10px;
}
.lineclass {
  margin-bottom: 20px;
  width: 1400px;
}
</style>
